import React, {Component} from 'react';
import {Button, Form, Select, Space} from "antd";

class RowAdd extends Component {
    render() {
        const typeOptions = [
            {
                label: '卡片',
                value: 'card'
            },
            {
                label: '列表',
                value: 'list',
            },
            {
                label: '图表',
                value: 'chart'
            }
        ]
        const valOptions = [
            {
                label: '全站流量',
                value: 'v_card_quanzhanliuliang'
            }
        ]
        const colOptions = [
            {
                label: '1/4布局',
                value: 6
            },
            {
                label: '1/3布局',
                value: 8
            },
            {
                label: '1/2布局',
                value: 12
            },
            {
                label: '整行布局',
                value: 24
            },
        ]
        return <Form onFinish={this.props.onFinish}>
            <Form.Item name={'type'} label={'类型'} rules={[{required: true}]}>
                <Select options={typeOptions}/>
            </Form.Item>
            <Form.Item name={'val'} label={'显示内容'} rules={[{required: true}]}>
                <Select options={valOptions}/>
            </Form.Item>
            <Form.Item name={'colUnit'} label={'布局方式'} rules={[{required: true}]}>
                <Select options={colOptions}/>
            </Form.Item>
            <Form.Item>
                <Space style={{display: 'flex', justifyContent: 'flex-end'}}>
                    <Button onClick={this.props.handleCancel}>取消</Button>
                    <Button type={'primary'} htmlType={'submit'}>确认</Button>
                </Space>
            </Form.Item>
        </Form>
    }
}

export default RowAdd;